<template>
  <div class="Login">
    <Vcode :show="isShow" @success="success" @close="close"/>
   <div class="login-info">
     <p align="center"><font style="font-family: 华文行楷">用户登录</font></p>
     用户账号:
     <el-input v-model="username" placeholder="请输入用户账号"></el-input>
     <br><br>
     用户密码:
     <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
     <br><br>
     <el-button type="primary" @click="submit">登录</el-button>
     <br><br>
     <router-link :to="{name:'Forget'}"><a style="text-decoration: none;color: black"><u>修改密码</u></a></router-link>&nbsp;&nbsp;&nbsp;
     <router-link :to="{name:'Register'}"><a style="text-decoration: none;color: black"><u>注册账号</u></a></router-link>
   </div>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
import {login} from '../api/index';
export default {
  data() {
    return {
      username: '',
      password: '',
      isShow: false, // 验证码模态框是否出现
      flag:false
    };
  },
  components:
      {
        Vcode
      },
  methods: {
    submit() {
      if(this.username!=''&&this.password!=''){
        this.isShow = true;
      }else {
        this.$message.error('账号或密码未填')
      }
    },
    // 用户通过了验证
    success() {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      login({username: this.username, password: this.password}).then((res => {
        console.log(res.data)
        if (res.data.code === 100){
          window.localStorage.setItem('id', this.username)
          window.localStorage.setItem('username', res.data.data.name)
          window.localStorage.setItem("Authorization",res.data.data.token)
          console.log(window.localStorage.getItem("Authorization"))
          this.$message({
            type:'success',
            message:'登录成功'
          })
          if(this.username === '1')
            this.$router.push({path:'/Mine'})
          else
            this.$router.push({path:'/MainPage'})
        }else if(res.data.code===101){
          this.$message.error('账号或密码错误')
        }
      }))
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
    }
  },
  created: function () {
    window.localStorage.removeItem("Authorization")
  }
}
</script>

<style>
.el-input {
  width: 200px;
}

.el-button {
  width: auto;
}
font{
  font-size: 50px;
}
.Login{
  width: 100%;
  height: 837px;
  background: url("../../src/static/1.png") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.p1{
  color: red;
  margin-left: 5px;
}
.login-info{
  background: url("../../src/static/1.png") no-repeat;
  background-size: cover;
  width: 382px;
  height: 298px;
  margin: 215px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 20px;
}
</style>
